<template>
    <Page class="basic company">
        <template #header>
            <EdSelect v-model="params.villageId" :selectParams="villageNameParams" @emit-select-value="projectChange"></EdSelect>
            <EdSelect v-model="params.equipmentType" :selectParams="equipmentTypeParams"></EdSelect>
            <el-input placeholder="设备名称" v-model="params.equipmentName"></el-input>
            <el-button class="ed-button ed_black-bottom"  @click="search()"><svg-icon icon-class="search-svg"/>查询</el-button>
            <el-button class="ed-button ed_white_bottom" @click="reset()"><svg-icon icon-class="reset-svg"/>重置</el-button>
        </template>
        <PageCard title="设备列表">
            <template #actions>
                <el-button  class="ed-button ed_black-bottom ed-button36"  @click.native="add" v-has="'device:device:add'"><svg-icon icon-class="add-svg"/>新增</el-button>
                <el-button  class="ed-button ed_black-bottom ed-button36"  @click="edit" v-has="'device:device:update'"><svg-icon icon-class="edit-svg"/>编辑</el-button>
                <el-button icon="el-icon-delete" class="ed-button ed_del_top ed-button36"  @click="delSelection" v-has="'device:device:delete'">删除</el-button>
            </template>
            <ApiTable :api="tableApi" ref="table" :params="params" @selectionData="selectionData">
                <el-table-column type="selection" width="60" label="序号" align="center"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="equipmentNo" label="设备编号" ></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="equipmentName" label="设备名称"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" label="设备类型" :formatter="setDicType"  >
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="isImportant" label="设备标识">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isImportant==0">重要设备</span>
                        <span v-else-if="scope.row.isImportant==1">普通设备</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="installationSite" label="安装位置" width="320px">
                    <template slot-scope="scope">
                        {{scope.row.villageName}}-{{scope.row.installationSite}}
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="inventoryName" label="设备清单" width="220px">
                    <template slot-scope="scope">
                        <div width="200px" class="showpointCode" @click="detail(scope.row)">{{scope.row.inventoryName}}</div>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="supportPhone" label="售后服务电话" width="180px"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="url" label="点位码" >
                    <template slot-scope="scope">
                        <QrCode v-if="showCode(scope.row)" style="height: 64px; width: 64px;" @click.native="showerweiCode(scope.row)">{{scope.row.url}}</QrCode>
                        <!-- <img src="../../../src/images/img.png"  alt="#" @click="showerweiCode(scope.row)"> -->
                    </template>
                </el-table-column>
            </ApiTable>
        </PageCard>
        <ed-confirm-delete ref="confirmDeleteRef" @confirmDeleteTrue="confirmDeleteTrue()"></ed-confirm-delete>

        <el-dialog
            title="查看点位码"
            :visible.sync="showPointVisible"
            width="20%">
            <div class="erweicodeCenter">
                <div >
                    <QrCode style="height: 135px; width: 141px;" >{{erweiCode.url}}</QrCode>
                </div>
                <div>
                    <span>{{erweiCode.equipmentType ==0 ? '位置点位码' :'设备点位码'}}:</span>
                    <span>{{erweiCode.url&&erweiCode.url.split("=")[erweiCode.url.split("=").length-1]}}</span>
                </div>
            </div>
            <!-- <span slot="footer" class="dialog-footer downLoadCode">
                <el-button class="ed-button ed_black-bottom"  @click="showPointVisible = false"  >打印</el-button>
                <el-button class="ed-button ed_black-bottom" @click="showPointVisible = false"  >下载</el-button>
            </span> -->
        </el-dialog>

       
    </Page>
    
</template>

<script>
import QrCode from 'src/components/QrCode.vue';
import {deviceList,deviceDelete,projectList,checkIfDevice,delWorkByEquipmente} from "./api.js";
import Page from 'src/views/components/Page.vue'
import PageCard from 'src/views/components/PageCard.vue'
import ApiTable from 'src/components/ApiTable.vue'
import EdSelect from 'src/components/EdSelect.vue'
import EdDialog from 'src/components/EdDialog.vue'
import { defineComponent } from 'vue'
import EdConfirmDelete from "src/components/EdConfirmDelete.vue";
import {getDictByCode} from "src/api/dictionaries";
export default defineComponent({
    name: 'project',
    components: { Page, PageCard, ApiTable, EdSelect, EdDialog,EdConfirmDelete,QrCode},
    data() {
        return {
            params: {
                villageName:'',
                equipmentType:"",
                equipmentName:'',
                villageId:''
            },
            confirmRow: '',
            villageNameParams:{
                placeholder:"请选择项目",
                options: [],
                // props: {label:"label", value:"value"}
            },
            equipmentTypeParams:{
                placeholder:"设备类型",
                options: [],
            },
            multipleSelection:[],
            ids:[],
            showPointVisible:false,
            packageDownloadVisible:false,
            erweiCode: {
                url:'',
                equipmentType: '',
                id: '',
            },
            isHaveWork:''
        }
    },
    activated(){
        this.$nextTick(()=>{
            this.$refs.table.load()
            this.initDic()
        })
        // 获取字典值方式
        getDictByCode("deviceType").then(response => {
            if(response.success) {
                this.equipmentTypeParams.options=response.data.items
            }
        })

        
    },
    methods: {
        tableApi:deviceList,
        initDic() {
            projectList({page:1,pageSize:999999}).then(response => {
                if(response.success) {
                    let options = response.data.records.map(x => {return {label:x.villageName, value: x.villageId}})
                    this.villageNameParams.options = options
                }
            })
        },  
        setDicType(row ,cloumn) {
            let options = this.equipmentTypeParams.options.find(x => x.value == row.equipmentType)
            return options ? options.label.toString() : ''
        },  
        search(){
            this.$refs.table.load(1)
        },
        reset(){
            this.params = {
                villageName:'',
                equipmentType:"",
                equipmentName:'',
                villageId:''
            }
            this.$nextTick(()=>{
                this.$refs.table.load(1,10)
            })
        },
        add(){
            this.$router.push({
                path: '/device/deviceAdd'
            })
        },
        edit(){
            if(this.multipleSelection.length == 1) {
                let row = (this.multipleSelection[0])
                // console.log(row);
                this.$router.push({
                    path: '/device/deviceUpdate',
                    query: {id: row.id}
                })
            } else if(this.multipleSelection.length > 1) {
                this.$message.warning({
                    message: '只能选择一条数据进行编辑',
                    center:true
                });
            } else {
                this.$message.warning({
                    message: '请选择要编辑的数据',
                    center:true
                });
            }
        },
        del(){
            let message = ""
            if (this.isHaveWork == 1) {
                message="所选设备在巡检任务/计划中，确定删除？"
            } else {
                message="是否执行此操作？"
            }
            this.$refs.confirmDeleteRef.open(
                "操作确认",
                message,
                "warning"
            );
        },
        confirmDeleteTrue(){
            // 这里ids要传一个数组的集合，
            if(this.isHaveWork == 1){
                delWorkByEquipmente(this.ids).then((response) => {
                    if (response.success) {
                        this.$message.success({
                        message: "设备已删除成功！",
                        duration: 2000,
                        center: true,
                        });
                        this.$refs.table.load();
                        }
                    });
            } else {
                deviceDelete(this.ids).then(response => {
                    if(response.success) {
                        this.$message.success({
                            message: '设备已删除成功！',
                            duration: 2000,
                            center:true
                        });
                        this.$refs.table.load()
                    }
                })
            }
            
        },
        selectionData(value){
            this.multipleSelection = value
        },
        delSelection(){
            if(this.multipleSelection.length>0){
                // 调多选的删除的接口,从数组对象里面取得数组ID
               let ids= this.multipleSelection.map((x)=>{return {id:x.id}})
               this.ids = ids
               console.log('ids',ids);
            //    this.del()
            // 查询设备是否有任务的接口
                checkIfDevice(this.ids).then((response) => {
                    if (response.success) {
                        this.isHaveWork = response.data.isHaveWork;
                        // console.log("isHaveWork", isHaveWork);
                        this.del();
                    }
                });
            } else {
                this.$message.warning({
                    message: '请选择要删除的数据',
                    center:true
                });
            }
        },
        showerweiCode(row){
           this.showPointVisible=true
           this.erweiCode = row
        },
        showCode(row) {
            return row.url && row.url.indexOf("=") > -1
        },
        projectChange(row) {
            let option = this.villageNameParams.options.find(x=>x.value==row)
            console.log(option);
            this.params.villageName = option.label
        },
        detail(row){
            window.open(row.facilityInventory)
        }
    }
})
</script>

<style lang="scss" scoped>
.erweicodeCenter{
    display: flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    .erweiCodeUrl{
        width: 41px;
        height: 40px;
    }
}
.downLoadCode{
        display: flex;
        justify-content:center;
    }
.erweicodeCenter h4{
    text-align: center;
    margin-bottom: 15px;
}
.pointinfo{
    text-align: center;
    margin-bottom: 15px;
}
.showpointCode{
    color:#6F8EC6;
    text-decoration:underline ;
}

</style>